<template>
	<view :style="{'padding-top':CustomBar+'px'}">
		<view class="align-center rowsb">
			<view class="flex align-center">
				<view v-for="(item,index) in titleList" :key="index" class="margin-left "
					@click="titleActiveNum = item.id">
					<view class="square_title"
						:class="{'active_square_title animation-scale-up': item.id == titleActiveNum}">
						{{item.title}}
					</view>
					<view class="active_heng" :class="{active_heng2: item.id == titleActiveNum}"></view>
				</view>
			</view>
			<view v-if="titleActiveNum ==4" class="margin-right" style="color: #9AA2B5;" @click="screening">
				<text>筛选</text>
				<text class="cuIcon-unfold margin-left-xs"></text>
			</view>
		</view>
		<view class="padding-sm  animation-slide-right" v-show="titleActiveNum == 0">
			<view class="rowsa text-center ">
				<view v-for="(item,index) in classifyList" :key="index" @click="videoMen(item)">
					<image :src="item.image" mode="" class="classify_icon animation-scale-up"></image>
					<view class="classify_title">{{item.title}}</view>
				</view>
			</view>
			<view class="text-center">
				<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item,index) in bannerList" :key="index" style="height: 240rpx;">
						<image :src="item.image" mode="aspectFill" class="classify_image" ></image>
					</swiper-item>
				</swiper>
			</view>
			<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item" :class="index==TabCur?'tacurText animation-scale-up cur':''"
					v-for="(item,index) in categoryList" :key="item.id" @tap="tabSelect" :data-id="index">
					{{item.name}}
				</view>
			</scroll-view>
			<!-- 	<view class="flex flex-wrap rowsb" v-if="TabCur ==1">
				<view class="video_body margin-top" v-for="(item,index) in 15">
					<view class="video_top text-sm text-white align-center padding-left-xs">
						<image src="/static/home/imgzuanshi-1.png" mode="widthFix" style="width:30rpx ;"></image>
						<view>30-40/min</view>
					</view>
					<image src="/static/ces.jpg" mode="aspectFill" class="video_body"></image>
					<view class="video_bottom text-center  rowsc align-center">
						<view>
							<view class="text-xl text-bold text-white">全球</view>
							<view class="text-sm margin-top-xs text-white onelineshow">
								与全球小姐姐视频聊天
								与全球小姐姐视频聊天
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<!--  v-if="TabCur == 6" -->
			<!-- 心动女生 -->
			<view class="heartbeat_schoolgirl margin-top animation-scale-up" v-for="(item,index) in cateGoryData"
				:key="index" @click="videoPlay(item)">
				<image :src="item.image" mode="aspectFill" class="heartbeat_schoolgirl"></image>
				<view class="video_top text-sm text-white align-center padding-left-xs">
					<image src="/static/home/imgzuanshi-1.png" mode="widthFix" style="width:30rpx ;"></image>
					<view>{{item.priceRange || 0}}/min</view>
				</view>
				<view class="video_bottom text-center  rowsc align-center">
					<view>
						<view class="text-xl text-bold text-white">{{item.name}}</view>
						<view class="text-sm margin-top-xs text-white onelineshow">
							{{item.intro}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 抢聊 -->
		<view v-show="titleActiveNum ==1" class=" animation-slide-right">
			<view class="margin-bottom">
				<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
					<view class="cu-item" :class="index==TabCur?'tacurText cur':''" v-for="(item,index) in categoryList"
						:key="item.id" @tap="tabSelect" :data-id="index">
						{{item.name}}
					</view>
				</scroll-view>
			</view>
			<view class="rowsc">
				<view class="stream ">
					<view class="video_list " v-for="(item,index) in cateGoryData">
						<image :src="item.mage" mode="widthFix" class="video_list "></image>
						<view class="video_bottom2 text-sm text-white align-center padding-left-xs">
							<image src="/static/home/imgzuanshi-1.png" mode="widthFix" style="width:30rpx ;"></image>
							<view>{{item.fee || 0}}/min</view>
						</view>
						<view class="video_top2 text-white align-center">
							<!-- <image src="../../static/message/imgxingxing.png" mode="widthFix" style="width: 40rpx;"></image> -->
							<image src="/static/message/imgxingxing-5.png" mode="widthFix" style="width: 40rpx;">
							</image>
							<text class="text-white margin-left-xs"> {{item.score}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 广场 -->
		<view v-show="titleActiveNum ==4" class=" animation-slide-right">
			<view class="flex justify-between align-center solid-bottom padding animation-fade"
				v-for="(item,index) in squareList" @click="chatMen(item)">
				<view class="flex align-center">
					<image :src="item.avatar" mode="aspectFill" class="square_image animation-scale-up"></image>
					<view class="margin-left">
						<view class="square_name one_overflow">{{item.userName}}</view>
						<view class="square_classify margin-top-sm">
							<text>地区：{{item.area}}</text>
							<text class="margin-lr">年龄：{{item.age}}</text>
							<text>身高：{{item.stature}}cm</text>
						</view>
					</view>
				</view>
				<view>
					<view class="align-center">
						<text class="square_time">1小时前</text>
						<image src="/static/home/imgxiaoxi-4.png" mode="" class="square_icon"></image>
					</view>
					<view class="justify-end flex margin-top-sm">
						<view class="square_messageTo">
							打招呼
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<view class="warp" v-if="isScreening" @click="screening">
			<view class="screening_body animation-slide-bottom" @click.stop>
				<view class="rowsb align-center text-center padding">
					<view style="width: 33.3%;"></view>
					<view style="width: 33.3%;" class="text-bold text-xl">筛选</view>
					<view style="width: 33.3%;" class="justify-end" @click="screening()">
						<text class="cuIcon-roundclose text-gray" style="font-size: 40rpx;"></text>
					</view>
				</view>
				<view class="padding">
					<text class="text-bold ">距离</text>
					<text class="cuIcon-back text-gray margin-left"></text>
					<text class="text-gray">
						<text>{{distance || ' '}}</text>
						<text style="color: #EAA019;">km</text>
					</text>
				</view>
				<view class="input_km text-center">
					<input type="text" value="" placeholder="请输入距离" maxlength="6" v-model="distance" />
				</view>
				<view class="padding-lr padding-top">
					<text class="text-bold ">年龄</text>
					<text class="text-gray margin-left">
						<text>{{minimumAge ||  ' '}}</text>
						<text style="color: #EAA019;">岁</text>
					</text>
					<text class="margin-left"> - </text>
					<text class="text-gray margin-left">
						<text>{{maximumAge ||  ' '}}</text>
						<text style="color: #EAA019;">岁</text>
					</text>
				</view>
				<view class="padding align-center rowsb ">
					<view class="input_left">
						<input type="text" value="" placeholder="最低年龄" maxlength="3" v-model="minimumAge" />
					</view>
					<view style="height: 1rpx;width: 100rpx; background-color: #EEEEEE;"></view>
					<view class="input_left">
						<input type="text" value="" placeholder="最高年龄" maxlength="3" v-model="maximumAge" />
					</view>
				</view>
				<view class="align-center">
					<view class="padding-lr">
						<text class="text-bold ">身高</text>
						<text class="text-gray margin-left">
							<text>{{minimumStature ||  ' '}}</text>
							<text style="color: #EAA019;">cm</text>
						</text>
					</view>
					<text> - </text>
					<view class="padding-lr">
						<text class="text-bold ">身高</text>
						<text class="text-gray margin-left">
							<text>{{maximumStature || ' '}}</text>
							<text style="color: #EAA019;">cm</text>
						</text>
					</view>
				</view>
				<view class="padding align-center rowsb ">
					<view class="input_left">
						<input type="number" value="" placeholder="最低身高" maxlength="3" v-model="minimumStature" />
					</view>
					<view style="height: 1rpx;width: 100rpx; background-color: #EEEEEE;"></view>
					<view class="input_left">
						<input type="number" value="" placeholder="最高身高" maxlength="3" v-model="maximumStature" />
					</view>
				</view>
				<view class="text-red text-sm padding-top text-center">
					{{screenTExt || ''}}
				</view>
				<view class="align-center">
					<button class="submit1" @click="chatMessage()">重置</button>
					<button class="submit2" @click="submitScreen()">完成</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		chatCategory
	} from '@/common/path.js'
	export default {
		data() {
			return {
				titleList: [{
						title: "求聊",
						id: 0
					},
					{
						title: "抢聊",
						id: 1
					},
					{
						title: "缘分",
						id: 3
					},
					{
						title: "广场",
						id: 4
					}
				],

				videoList: [],
				cateGoryData: [],
				classifyList: [{
						image: '/static/home/imgyuanfen.png',
						title: '缘分',
						id: 1,
						url: "/pages/home/modules/destined/index"
					},
					{
						image: '/static/home/imgnusheng.png',
						title: '心动女生',
						id: 2
					},
					{
						image: '/static/home/imgzuanshi-2.png',
						title: '钻石',
						url: '/pages/home/modules/diamond/index',
						id: 3,
					},
					{
						image: '/static/home/imgyaoqing-3.png',
						title: '邀请',
						url: "/pages/plugins/share/share",
						id: 4
					}
				],
				categoryList: [], //分类列表
				scrollLeft: 0,
				isScreening: false,
				titleActiveNum: 0, //默认选中状态
				TabCur: 0, //，默认选中分类
				catPid: '', //分类id
				pageData: 1, //第一页 分类下的内容

				//广场
				distance: '', //根据距离筛选
				minimumAge: '', //最低年龄
				maximumAge: '', //最低年龄
				minimumStature: '', //最低身高
				maximumStature: '', //最高身高
				squarePage: 1, //页数
				screenTExt: '', //筛选错误控制
			}
		},
		//生命周期函数
		onReady() {},
		onLoad() {
			this.chatCategory() //分类
			this.getbannerList({
				type: 0
			}) //轮播图
		},
		onShow() {
			this.titleActiveNum = 0
		},

		watch: {
			//大分类
			titleActiveNum(event) {
				//切换分类重置分页
				this.pageData = 1
				this.squarePage = 1
				if (event == 3) { //缘分
					uni.navigateTo({
						url: '/pages/home/modules/destined/index'
					})
				} else if (event == 4) { //广场
					this.screen()
				}
			},
			//根据id筛选
			TabCur(i) {
				console.log(i);
				this.catPid = this.categoryList[i].id
				this.pidchatCategory()
			},

		},

		methods: {
			...mapActions('system', ['getbannerList']),
			// 消息跳转
			chatMen(e) {
				uni.setStorageSync('ta_id', e.id)
				let url = e.avatar
				getApp().globalData.taAvatar = url
				uni.navigateTo({
					url: `/pages/chat/chat?avatar=${e.avatar}&taId=${e.taId}&userName=${e.userName}`
				})
			},
			/**
			 * 广场筛选 重置
			 */
			chatMessage() {
				this.distance = ''
				this.minimumAge = ''
				this.maximumAge = ''
				this.minimumStature = ''
				this.maximumStature = ''
				this.squarePage = 1
				let VueT = this
				this.isScreening = false //关闭弹窗
				this.screen()
			},
			/**
			 * 广场筛选 确定
			 */
			submitScreen() {
				this.squarePage = 1
				let VueT = this
				if (this.minimumAge > this.maximumAge) {
					this.$tools.showToast('最大年龄不能小于最小年龄筛选')
					this.screenTExt = '最大年龄不能小于最小年龄筛选'
					return
				}
				if (this.minimumStature > this.maximumStature) {
					this.$tools.showToast('最大身高不能小于最小身高范围')
					this.screenTExt = '最大身高不能小于最小身高范围'
					return
				}
				this.screen()
			},
			screen() {
				let VueT = this
				this.screenTExt = ''
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						VueT.getuserSquare({
							"id": uni.getStorageSync('userInfo').id, //用户id
							"longitude": res.longitude, //用户经度
							"latitude": res.latitude, //用户经度
							"distance": VueT.distance, //根据距离筛选
							"minimumAge": VueT.minimumAge,
							"maximumAge": VueT.maximumAge,
							"minimumStature": VueT.minimumStature,
							"maximumStature": VueT.maximumStature,
							"pageNum": VueT.squarePage,
							"pageSize": 20, //2条
						}) //广场
					},
					fail(err) {
						console.log('失败');
					},
				});
			},
			//触底
			onReachBottom(e) {
				if (this.titleActiveNum == 4) { //广场
					this.squarePage++
					this.screen()
				} else if (this.titleActiveNum == 1) { ///求聊
					this.pageData++
					this.pidchatCategory()
				}
			},
			/**
			 * getuserSquare 广场接口
			 */
			...mapActions('square', ['getuserSquare']),
			//视频
			videoPlay(item) {
				console.log(item.id);
				this.$tools.push('/pages/chat/videoPlay')
			},

			//分类
			chatCategory() {
				this.Http.POST(chatCategory, {})
					.then((res) => {
						if (res.code == 0) {
							// console.log('[分类]', res);
							this.categoryList = res.data
							this.catPid = res.data[0].id
							this.pidchatCategory()
						}
					})
			},
			//分类下信息
			pidchatCategory() {
				this.Http.POST(chatCategory, {
						pid: this.catPid,
						"pageNum": this.pageData,
						"pageSize": 20, //2条
					})
					.then((res) => {
						if (res.code == 0) {
							// console.log('[分类下内容]', res);
							this.cateGoryData = res.data
						}
					})
			},

			//筛选
			screening() {
				this.isScreening = !this.isScreening
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60

			},

			//分类1跳转
			videoMen(item) {
				if (item.id == 2) {
					this.tabSelect({
						currentTarget: {
							dataset: {
								id: 4
							}
						}
					})
				} else {
					this.$tools.push(item.url)
				}
			}
		},
		computed: {
			/**
			 * squareList 广场列表
			 */
			...mapState('square', ['squareList']),
			/**
			 * bannerList 轮播图
			 */
			...mapState('system', ['bannerList']),
		},
		components: {}
	}
</script>

<style lang="scss">
	.active_square_title {
		font-size: 46rpx !important;
		font-family: PingFang SC !important;
		font-weight: bold !important;
		color: #06121E !important;
		opacity: 1;
	}

	.square_title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #9AA2B5;
		opacity: 1;
	}

	.active_heng {
		width: 42rpx;
		height: 10rpx;
		background: #EAA019;
		opacity: 1;
		border-radius: 5rpx;
		opacity: 0;
		margin: 0 auto;
		margin-top: 10rpx;
	}

	.active_heng2 {
		opacity: 1 !important;
	}





	// 弹窗
	.screening_body {
		width: 780rpx;
		height: 865rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0px 0px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.input_km {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690rpx;
		height: 80rpx;
		background: #F7F6FA;
		opacity: 1;
		border-radius: 7rpx;
		margin: 0 auto;
	}

	.input_left {
		width: 275rpx;
		height: 110rpx;
		background: #F7F6FA;
		opacity: 1;
		border-radius: 7rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.submit1 {
		width: 260rpx;
		height: 80rpx;
		background: #FFFFFF;
		border: 2rpx solid #707070;
		opacity: 1;
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.submit2 {
		width: 260rpx;
		height: 80rpx;
		background: linear-gradient(180deg, #EAA019 0%, #BA4949 100%);
		opacity: 1;
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		color: white;
	}

	// 弹窗


	//求聊
	.classify_icon {
		width: 102rpx;
		height: 102rpx;
	}

	.classify_title {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.classify_image {
		width: 702rpx;
		height: 200rpx;
		background: #FFAA1C;
		opacity: 1;
		border-radius: 21rpx;
		margin-top: 30rpx;
	}

	.tacurText {
		color: #EAA019;
	}

	.video_body {
		width: 342rpx;
		height: 400rpx;
		border-radius: 10rpx;
		position: relative;
	}

	.video_bottom {
		width: 100%;
		height: 110rpx;
		background: rgba(0, 0, 0, 0.5);
		opacity: 1;
		border-radius: 0px 0px 10rpx 10rpx;
		position: absolute;
		bottom: 0;
	}

	.video_top {
		width: 168rpx;
		height: 40rpx;
		background: linear-gradient(180deg, #EAA019 0%, #BA4949 100%);
		opacity: 1;
		border-radius: 0px 7rpx 7rpx 0px;
		line-height: 40rpx;
		position: absolute;
		left: 0;
		z-index: 1;
		top: 10rpx;
	}

	//心动女生
	.heartbeat_schoolgirl {
		width: 702rpx;
		height: 300rpx;
		border-radius: 21rpx;
		position: relative;
		background-color: #EEEEEE;
	}


	/* 广场 */
	.square_image {
		width: 88rpx;
		height: 88rpx;
		background: #FF8F2E;
		border-radius: 50%;
	}

	.square_icon {
		width: 40rpx;
		height: 40rpx;
	}

	.square_name {
		width: 308rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}

	.square_classify {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		width: 400rpx;
		color: #B7BED8;
		opacity: 1;
	}

	.square_time {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #9AA2B5;
		opacity: 1;
		margin-right: 20rpx;
	}

	.square_messageTo {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #EAA019;
		opacity: 1;
	}

	.table_xing {
		width: 134rpx;
		height: 54rpx;
		background: #EDEEF3;
		opacity: 1;
		border-radius: 28rpx;
		line-height: 54rpx;
		text-align: center;
		color: #171D34;
	}

	//抢聊
	.video_list {
		width: 342rpx;
		background: #EEEEEE;
		border-radius: 10rpx;
		position: relative;

	}

	.video_bottom2 {
		width: 168rpx;
		height: 40rpx;
		background: linear-gradient(180deg, #EAA019 0%, #BA4949 100%);
		opacity: 1;
		border-radius: 0px 7rpx 7rpx 0px;
		line-height: 40rpx;
		position: absolute;
		left: 0;
		z-index: 1;
		bottom: 30rpx;
	}

	.video_top {
		position: absolute;
		top: 10rpx;
		align-items: center;
		display: flex;
		left: 20rpx;
	}

	.stream {
		-webkit-column-count: 2;
		/* -moz-column-count: 2; */
		/* column-count: 2; */
		/* -moz-column-gap: 30rpx; */
		/* -webkit-column-gap: 30rpx; */
		/* display: inline-block; */
	}

	.video_top2 {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
	}
</style>
